<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        *{
            margin: 0px;
            padding: 0px;
        }
        .nav {
            height: 100px;
        }

        .nav img {
            margin-left: 100px;
        }
        .nav ul li {
            float: right;
            text-decoration: none;
            list-style: none;
        }
        .nav ul {
            float: right;
            margin-right: 50px;
        }
        .nav a {
            display: inline-block;
            height: 100px;
            margin-right: 10px;
            text-align: center;
            line-height: 100px;
            text-decoration: none;
            color: black;
            font-size: 20px;
        }

        .nav a:hover {
            color: red;
        }

        .banner {
            height: 620px;
            background: #fff url(../images/banner.jpg) no-repeat scroll center center;
        }

        .main {
            height: 660px;
        }

        .service {
             border-top: 1px solid #333333;
             width: 1000px;
             height: 95px;
             margin: 50px auto;
        }

        .service h3 {
            margin-top: -20px;
            text-align: center;
        }

        .service p {
            font-size: 15px;
            padding: 10px 20px 0px;
        }

        .service ul {
            margin-top: 20px;
        }

        .service li {
            float: left;
            margin-right: 10px;
            list-style: none;
            width: 320px;
            height: 510px;
            margin-top: 10px;
            border: 1px solid #e7e8e9;
        }
        
         .service  li img {
            margin: 40px 35px ;
        } 

        .service h3 {
            height:40px ;
            font-weight: normal;
            text-align: center;
        }

        .service li p {
            font-weight: normal;
            margin: 0px 10px;
            color: #333;
            font-size: 15px;
        }

        .service li a {
            display: block;
            width: 148px;
            height: 38px;
            border: 1px solid #ff9412;
            margin: 30px auto 0;
            text-align: center;
            line-height: 38px;
            color: #ff9412;
            font-size: 12px;
            text-decoration: none;
            border-radius: 5px;
        }

        .service li a:hover {
            color: red;
        }

    </style>
</head>
<body>
    <div class="nav">
        <img src="../images/logo.png" alt="">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">云道商店</a></li>
            <li><a href="">智慧门店</a></li>
            <li><a href="">营销平台</a></li>
            <li><a href="">媒体联盟</a></li>
            <li><a href="">关于云道</a></li>
        </ul>
    </div>

    <div class="banner">

    </div>

    <div class="main">
        <div class="service">
            <h3>
                <img src="../images/ser.png" alt="">
            </h3>
            <p>
                shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
            </p>

            <ul>
                <li> 
                    <img src="../images/icon1.png" alt="">
                    <h3>我是卖家</h3>
                    <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值</p>
                    <a href="">我要建站</a>
                </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>

            </ul>
        </div>
    </div>
</body>
</html>